<template>
	<div style='height:100%;'>
		<v-chart v-if='value' style='height: 100%;width: 100%;' :options='options'></v-chart>
		<loading v-else></loading>
	</div>
</template>

<script>
	export default {
		props : {
			value : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},
		
		data() {
			return {
			
			}
		},
		
		computed : {
			options () {
                var data = this.value
                var xAxisData = data.date
				var seriesData = [
                    {name : '总充值', lineStyle : {color : '#1c6ce4'}, data : data.data.total},
                    {name : '平均充值', lineStyle : {color : '#b1464b', type : 'dashed'}, data : data.data.avg}
                ]

				seriesData.forEach(item => {
					item.type = 'line'
					item.smooth = true
					item.symbol = 'none'
				})

				
				var options =  {
					tooltip : {
						show : true,
						trigger : 'axis'
					},
                    color : ['#61bae3', '#1a7efc', '#39d1aa', '#eec152'],
					grid : {
						top : '20px',
						right : '30px',
						bottom : '20px',
						left : '70px'
					},

					xAxis: {
						type: 'category',
						axisLine : {
							lineStyle : {
								color : '#373f50'
							}
						},
						axisTick : {
							show : false
						},
						axisLabel : {
							show : true,
							color : '#a3a5a9'
						},
						data: xAxisData
					},
					yAxis: {
						type: 'value',
						axisLine : {
							lineStyle : {
								color : '#373f50'
							}
						},
						axisTick : {
							show : false
						},

						axisLabel : {
							show : true,
							color : '#a3a5a9'
						},

						splitLine : {
							show : true,
							lineStyle : {
								color : '#373f50'
							}
						}
					},
					
					series: seriesData
				}

				return options
			}
		}
	}
</script>